<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>合集详情</title>
    <style>

        .video-topic-wrap {
            border-radius: .16rem .16rem 0 0;
        }

        .video-topic-pad{
            padding:0.48rem 0.32rem 0 0.32rem;
        }

        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 1;
        }

        .video-topic-head {
            height: 2.16rem;
            width: 7.5rem;
        }

        .video-topic-img {
            min-height: 2.6rem;
        }

        .video-topic-img img {
            width: 100%;
            height: 2.6rem;
        }

        .video-topic-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 4.36rem;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .video-topic-info {
            width: 100%;
            top: 1.74rem;
            left: 0;
            padding: 0 .32rem;
        }

        .video-topic-title {
        }

        .video-topic-count {
            margin-top:0.22rem;
            width:1.7rem;
            border-radius:0.22rem;
            height:0.44rem;
            line-height: 0.44rem;
            text-align:center;
        }


        .video-topic-desc {
            line-height: 0.36rem;
        }

        .video-topic-line{
            height:1px;
            margin-top:0.34rem;
            margin-bottom: 0.28rem;
        }
        .video-topic-btn {
            margin-top: 0.16rem;
            color: #FF9523;
        }

        .mescroll-upwarp {
            min-height: 0;
            padding: 0;
        }

        .video-topic-item{
            width:3.3rem;height:2.92rem;
        }

        .video-topic-item-first{
            margin-left:0.32rem;
            margin-right:0.26rem
        }

        .video-topic-item-img{
            width:3.3rem;height: 1.94rem;
        }
    </style>
</head>
<body>

<div class="video-topic flex-column h-100-p ff400" >
    <!--状态栏-->
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar flex-row justify-content-center right-bar-mult"></div>
        </div>
    </div>

    <div class="mescroll" id="mescroll">
        <div class="video-topic-head pos-r">
            <div class="video-topic-img"><img src="" alt=""></div>
            <!--<div class="video-topic-bg pos-a"></div>-->
            <!--<div class="flex-column video-topic-info pos-a">-->
            <!--    <div class="video-topic-title fs20 ff500 line1"></div>-->
            <!--    <div class="video-topic-count fs12"></div>-->
            <!--    <div class="flex-row fs12">-->
            <!--        <div class="video-topic-desc line1"></div>-->
            <!--        <div class="video-topic-btn"></div>-->
            <!--    </div>-->
            <!--</div>-->
        </div>

        <div class="pos-r">
            <div class="video-topic-wrap">
                <div class="video-topic-pad flex-column">
                    <div class="ff500 fs18 video-topic-title"></div>
                    <div class="fs13 mt3 video-topic-desc"></div>
                    <div class="fs11 video-topic-count"></div>
                    <div class="video-topic-line"></div>
                </div>
                <div class="video-topic-list flex-row flex-wrap">
                    <!--<div class="video-topic-item video-topic-item-first mb20">-->
                    <!--    <div class="video-topic-item-img">-->
                    <!--        <img class="h-100-p w-100-p"  src="https://storage.360buyimg.com/ifis/ifis/png/5e7efe40-9809-4dbe-afbc-46b00a572f47.png" />-->
                    <!--    </div>-->
                    <!--    <div class="video-topic-item-title fs15 line1 mt8">期权初级课程22.看期权初级课程22涨</div>-->
                    <!--    <div class="video-topic-item-time mt2 fs13">2021-05-21</div>-->
                    <!--</div>-->

                    <!--<div class="video-topic-item  mb20">-->
                    <!--    <div class="video-topic-item-img">-->
                    <!--        <img class="h-100-p w-100-p" src="https://storage.360buyimg.com/ifis/ifis/png/5e7efe40-9809-4dbe-afbc-46b00a572f47.png" />-->
                    <!--    </div>-->
                    <!--    <div class="video-topic-item-title line1 mt8">期权初级课程22.看期权初级课程22涨</div>-->
                    <!--    <div class="video-topic-item-time mt2 fs13">2021-05-21</div>-->
                    <!--</div>-->
                    <!--<div class="video-topic-item video-topic-item-first mb20">-->
                    <!--    <div class="video-topic-item-img">-->
                    <!--        <img class="h-100-p w-100-p"  src="https://storage.360buyimg.com/ifis/ifis/png/5e7efe40-9809-4dbe-afbc-46b00a572f47.png" />-->
                    <!--    </div>-->
                    <!--    <div class="video-topic-item-title line1 mt8">期权初级课程22.看期权初级课程22涨</div>-->
                    <!--    <div class="video-topic-item-time mt2 fs13">2021-05-21</div>-->
                    <!--</div>-->
                    <!--<div class="video-topic-item  mb20">-->
                    <!--    <div class="video-topic-item-img">-->
                    <!--        <img class="h-100-p w-100-p"  src="https://storage.360buyimg.com/ifis/ifis/png/5e7efe40-9809-4dbe-afbc-46b00a572f47.png" />-->
                    <!--    </div>-->
                    <!--    <div class="video-topic-item-title line1 mt8">期权初级课程22.看期权初级课程22涨</div>-->
                    <!--    <div class="video-topic-item-time mt2 fs13">2021-05-21</div>-->
                    <!--</div>-->
                    <!--<div class="video-topic-item video-topic-item-first mb20">-->
                    <!--    <div class="video-topic-item-img">-->
                    <!--        <img class="h-100-p w-100-p"  src="https://storage.360buyimg.com/ifis/ifis/png/5e7efe40-9809-4dbe-afbc-46b00a572f47.png" />-->
                    <!--    </div>-->
                    <!--    <div class="video-topic-item-title line1 mt8">期权初级课程22.看期权初级课程22涨</div>-->
                    <!--    <div class="video-topic-item-time mt2 fs13">2021-05-21</div>-->
                    <!--</div>-->

                </div>

            </div>
        </div>
    </div>


</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let pm = {
    lastDttm: DateUtils.getNowInt(),
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: '',
    stockList: [],
    infoType: '99',
    infoId:'',
    funcCode:''
  }

  function initPage(params) {
    jsBridge.setWebFullScreen({'statusNumber':'1'})
    //状态栏自适应
    Utils.sbhAdaptive()


    pm.funcCode = params.funcCode ? params.funcCode : '003001'
    // pm.infoId = params.infoId
    // pm.infoType = params.infoType
    pageScroll()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getInfoListByFuncCode //滚动加载入口
    })

  }

  function reLoadPage() {
    refreshAchive()
  }

  function refreshAchive() {
    pm.isScroll = false//初始化滚动状态
    pm.pageNum = 1
    pm.pageSize = 10
    pm.title = ''

    getTopicInfo(true)
    getInfoListByFuncCode()
  }

  function getTopicInfo() {
    // 获取专题详情
    Server.videoTopic.getSpecialInfo({
      funcCode: pm.funcCode
    }).then(function (data) {
      pm.title = data.specialInfo.funcName
      pm.trialContent = data.specialInfo.introduction
      $('.video-topic-img img').attr('src', data.specialInfo.coverImgUrl)
      $('.video-topic-title').html(data.specialInfo.funcName)
      $('.video-topic-desc').html(data.specialInfo.funcDescribe)
    }).catch((err => {
    }))
  }

  function getInfoListByFuncCode() {
    // 根据funcCode获取资讯列表
    Server.videoTopic.getSpecialList({
      funcCode: pm.funcCode,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      let htmlStr = ''
      let nextFlage = false
      if (data.specialsList !== null && data.specialsList.length > 0) {
        nextFlage = data.specialsList.length === pm.pageSize
        $.each(data.specialsList, function (i, item) {
          if(i % 2 === 0){
            htmlStr += `<div class="video-topic-item video-topic-item-first mb20" onclick="govideoPlay({'infoId':'${item.infoId}','trainingType':'${item.trainingType}'})">`
          }else{
            htmlStr += `<div class="video-topic-item  mb20" onclick="govideoPlay({'infoId':'${item.infoId}','trainingType':'${item.trainingType}'})">`
          }
          htmlStr += `<div class="video-topic-item-img">
                            <img class="h-100-p w-100-p"  src="${item.coverImgUrl}" />
                        </div>
                        <div class="video-topic-item-title fs15 line1 mt8">${item.mainTitle}</div>
                        <div class="video-topic-item-time mt2 fs13">${DateUtils.int2Str(item.issuerDttm * 1000,'yyyy-MM-dd')}</div>
                    </div>`
        })
        if (pm.pageNum === 1) {
          $('.video-topic-list').html(htmlStr)
        } else {
          $('.video-topic-list').append(htmlStr)
        }
      }

      $('.video-topic-count').html('共' + data.total + '个视频')
      //记录下一次遍历的日期
      pm.pageNum++
      meScroll.endSuccess(data.total, nextFlage)

    }).catch((error) => {
      meScroll.endErr()
    })
  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar .iconfont').css({
        'color': 'rgb(255,255,255)'
      })

      $('.right-bar .iconfont').css({
        'color': 'rgb(255,255,255)'
      })

    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      if (window.systemConfig.themeType === '1' || window.systemConfig.themeType === 1) {
        $('.left-bar .iconfont').css({
          'color': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
        })
        $('.right-bar .iconfont').css({
          'color': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
        })
      } else {
        $('.left-bar .iconfont').css({
          'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
        })
        $('.right-bar .iconfont').css({
          'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
        })
      }

    }
    if (window.systemConfig.themeType === '1' || window.systemConfig.themeType === 1) {
      $('.placeholder-top').css({
        'background': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    } else {
      $('.placeholder-top').css({
        'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
      })
    }
  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    $('.mescroll').scroll(function () {
      //需要特殊处理的滚动区域，需要放在scroller元素区域内
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }

  function govideoPlay(params){
    if('2' === params.trainingType){
      jsBridge.openWindow('/html/video/videoplay.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }else{
      jsBridge.openVideo({'infoId':params.infoId,'resourceType':params.trainingType})
    }
  }

</script>
</html>
